YOUR FIRST METEOR APPLICATION翻译（八）——表单（Form）

创建表单
在这里我们将会一步一步地演示如何在Meteor.js里面创建一个表单。

在HTML文件里面创建一个模板，名字为 “addPlayerForm”:

1	<template name="addPlayerForm"> </template>

然后将下面的便签添加到 “leaderboard” 模板里:

1	{{> addPlayerForm}}

在 “addPlayerForm” 模板里, 创建如下两个HTML标签:

<template name="addPlayerForm">
	<form>
		<input type="text" name="playerName">
		<input type="submit" value="Add Player">
	</form>
</template>

模板里面的代码应该如下:

虽然出来的样子戳了一点，不过呢，我们要求的功能已经有了。

提交事件
现在我们已经创建好了表单，接下来我们要做的就是为表单的提交加入它的相应事件，有了前面的基础，我们很容易就能想到下面的代码：

Template.addPlayerForm.events({
	// events go here
	'submit form': function(){ 
		console.log("Form submitted");
	}
});

这样当我们点击了提交的按钮之后就会在javascript控制台上出现“Form submitted”

现在我们知道怎么触发事件了，可我们要如何在事件里面读取表单里面的值呢？通过下面的代码，我们就可以达到目的了:

'submit form': function(event){
	event.preventDefault();
	console.log("Form submitted");
	console.log(event.type);
}

通过以上的代码，我们就可以实现我们提交表单的时候所按按钮的type，当然可能会有不少人已经注意到了event.preventDefault();这行代码了，其实，这行代码就是阻止submit的按钮原本所会触发的事件（大家所熟知，按submit就会跳转页面吧~别告诉我你不知道哦！）

可能又会有人问了，怎么还不告诉我怎么读取表单里面其他内容的方法呢！？

嘛嘛嘛，现在不就要来说了嘛，看代码:

'submit form': function(event){
	event.preventDefault();
	var playerNameVar = event.target.playerName; 
	console.log(playerNameVar);
}

好吧，就酱紫，我们这章又讲完了~额，不要问我为什么原版书写得那么长那么详细，我只能说我们中文博大精深嘛，我给你个眼神自己体会去~

感谢meteortips & David以上内容根据英文版的YOUR FIRST METEOR APPLICATION粗略翻译而来，在未经我本人允许的情况下请勿转载，违者本人保留法律追究的权利。